<template>
  <div class="information">
    <div class="tabs">
      <div class="tabs-box">
        <div class="tabs-item" :class="{active: tabsActive === index}" v-for="(item, index) in tabs" :key="index"
             @click="changeActive(index)">
          {{ item.name }}
        </div>
      </div>
    </div>

    <div class="tabs-body" v-if="tabsActive === 0">
      <div class="center-title">
        <img src="../../assets/img/nlzx-title-bg.png" alt="">
        <span>拍摄基地</span>
        <img src="../../assets/img/nlzx-title-bg.png" alt="">
      </div>
      <div class="center-sub-title">Shooting Base</div>
      <div class="center-box">

        <div class="service-items">
          <div class="service-items-li">
            <div class="service-items-img" v-for="(item, i) in serviceList" :key="i">
              <a @click="serviceClick(item.url)">
                <div class="name d-flex align-items-c justify-content-c">{{item.name}}</div>
                <div class="name-bg"></div>
                <img :src="item.img">
              </a>
            </div>

          </div>
        </div>

        <!--<div class="shooting-box">
          <img src="../../assets/img/base-psjd.png" alt="">
          <div class="shooting-desc">
            从1996年为拍摄电影《鸦片战争》而建设广州街起步，已建成秦王宫、清明上河图、明清宫苑、梦幻谷、梦外滩、圆明新园等30多个跨越五千年历史时空的影视拍摄基地，以及100多座不同等级的摄影棚，是全球规模最大的影视实景基地。逐步形成了影视拍摄、服装道具、影视器材、后期制作、演员经纪等配套要素一应俱全的“影视王国”，已真正成为中国规模最宏大、要素最集聚、技术最先进、成本最低廉的影视产业基地。年接待影视剧组300多个，累计接待剧组3200多个，全国四分之一的影视剧、三分之二的古装剧在横店拍摄完成。
          </div>
          <div class="shooting-more">
            <div class="shooting-more-btn">查看详情</div>
          </div>
        </div>-->
      </div>
    </div>

    <div class="tabs-body" v-if="tabsActive === 1">
      <div class="center-title">
        <img src="../../assets/img/nlzx-title-bg.png" alt="">
        <span>主题景区</span>
        <img src="../../assets/img/nlzx-title-bg.png" alt="">
      </div>
      <div class="center-sub-title">Theme Scenic Area</div>
      <div class="center-box">
        <div class="dots-box">
          <div class="dots-item" v-for="(item, index) in pack" :key="index" :class="{active: active === index}" @click="dotChange(index)">
            <img  class="dots-item-img" :src="item.icon" alt="">
            <span class="dots-item-name">{{item.name}}</span>
          </div>
        </div>
        <a-carousel ref="carouselRef" :dots="false" arrows effect="fade" :after-change="onChange">
          <template #prevArrow>
            <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
              <img src="../../assets/img/theme-icon-prev.png" alt="">
            </div>
          </template>
          <template #nextArrow>
            <div class="custom-slick-arrow" style="right: 10px">
              <img src="../../assets/img/theme-icon-next.png" alt="">
            </div>
          </template>
          <div class="carousel-item" v-for="(item, index) in pack" :key="index">
            <img :src="item" alt="">
            <div class="center-item">
              <div class="center-left">
                <img class="center-left-img" :src="item.url" alt="">
              </div>
              <div class="center-right">
                <div class="center-left-title">{{ item.name }}</div>
                <div class="center-left-content">{{item.desc}}</div>
                <div class="center-left-more">查看更多 →</div>
              </div>
            </div>
          </div>
        </a-carousel>
      </div>
    </div>

    <div class="tabs-body" v-if="tabsActive === 2">
      <div class="center-title">
        <img src="../../assets/img/nlzx-title-bg.png" alt="">
        <span>企业园区</span>
        <img src="../../assets/img/nlzx-title-bg.png" alt="">
      </div>
      <div class="center-sub-title">Enterprise Park</div>
      <div class="center-box">
      </div>
    </div>

    <div class="tabs-body" v-if="tabsActive === 3">
      <div class="center-title">
        <img src="../../assets/img/nlzx-title-bg.png" alt="">
        <span>招商引资</span>
        <img src="../../assets/img/nlzx-title-bg.png" alt="">
      </div>
      <div class="center-sub-title">Attract Investment</div>
      <div class="center-box">
        <div class="card-box">
          <div v-if="false">
            <div class="card-item" v-for="(item, index) in attractList" :key="index">
              <div class="card-item-header">
                {{item.name}}
                <span>{{item.enName}}</span>
              </div>
              <div class="card-item-body">
                <div class="attract-list-item" v-for="(subItem, subIndex) in item.data" :key="subIndex">
                  <div class="attract-list-item-content">{{subItem.title}}</div>
                  <div class="attract-list-item-date">{{subItem.date}}</div>
                </div>
              </div>
            </div>
          </div>


          <div class="card-item" v-for="(item, index) in attractButton" :key="index">
            <div class="card-item-header">
              {{item.name}}
              <span>{{item.enName}}</span>
            </div>
            <div class="card-item-body">
              <div class="attract-button-box">
                <div class="attract-button-item" v-for="(subItem, subIndex) in item.data" :key="subIndex">
                  <div class="attract-button-item-img">
                    <img :src="subItem.icon" alt="">
                  </div>
                  <div class="attract-button-item-title">{{subItem.title}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="more-box">
      <!--<div class="more-btn more-btn-more">更多资讯</div>-->
    </div>

    <div class="iframe-bg" v-if="iframeShow" @click="iframeClose">
      <iframe :src="iframeSrc"></iframe>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: "Theme",
  setup() {
    const tabsActive = ref<number>(0)
    const active = ref<number>(0)
    const carouselRef = ref()
    let tabs = [
      {
        name: '拍摄基地'
      },
      {
        name: '主题景区'
      },
      {
        name: '企业园区'
      },
      {
        name: '招商引资'
      }
    ]
    const attractList = [
      {
        name: '发展规划',
        enName: 'Development Planning',
        data: [
          {
            title: '新闻资讯的标题内容一多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容二多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容三多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容四多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容五多几个字的情况',
            date: '2022-09-21'
          }
        ]
      },
      {
        name: '招商政策',
        enName: 'Investment Policy',
        data: [
          {
            title: '新闻资讯的标题内容一多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容二多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容三多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容四多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容五多几个字的情况',
            date: '2022-09-21'
          }
        ]
      },
      {
        name: '招商项目',
        enName: 'Investment Projects',
        data: [
          {
            title: '新闻资讯的标题内容一多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容二多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容三多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容四多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容五多几个字的情况',
            date: '2022-09-21'
          }
        ]
      },
      {
        name: '投资动态',
        enName: 'Investment Trends',
        data: [
          {
            title: '新闻资讯的标题内容一多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容二多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容三多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容四多几个字的情况',
            date: '2022-09-21'
          },
          {
            title: '新闻资讯的标题内容五多几个字的情况',
            date: '2022-09-21'
          }
        ]
      }
    ]
    const attractButton = [
      {
        name: '招商服务',
        enName: 'Investment invitation service',
        data: [
          {
            title: '政务服务网',
            icon: require('@/assets/img/base-zsyz-icon-1.png')
          },
          {
            title: '投资申报',
            icon: require('@/assets/img/base-zsyz-icon-2.png')
          },
          {
            title: '通知公告',
            icon: require('@/assets/img/base-zsyz-icon-3.png')
          },
          {
            title: '个人办事',
            icon: require('@/assets/img/base-zsyz-icon-4.png')
          }
        ]
      },
      {
        name: '咨询互动',
        enName: 'Consultation Interaction',
        data: [
          {
            title: '投资咨询',
            icon: require('@/assets/img/base-zsyz-icon-5.png')
          }
        ]
      }
    ]
    const pack = [
      {
        name: '广州街-香港街',
        desc: '广州街·香港街，1996年为配合谢晋导演拍摄《鸦片战争》而建，是横店影视城的发祥地，再现了1840年前后的羊城和香江。主要景点有维多利亚港、圣约翰教堂、皇后大道、钟楼等，共有影视主题民宿12栋、131个房间，分13个主题，每个主题都是一部电影或电视剧，景区总面积40万平方米。',
        icon: require('../../assets/img/theme-icon-1.png'),
        url: require('../../assets/img/theme-pack-1.png'),
      },
      {
        name: '明清宫苑',
        desc: '明清宫苑始建于1998年，2006年建成，按照北京故宫1：1比例修建的，是横店影视城造城运动的登峰造极之作，总计炸掉了13个小山峰，占地1500亩，投资8亿元，是横店影视城目前最大的影视基地。这里与北京故宫的相似程度让人震惊，单体建筑全部是1∶1仿造，只有“天安门”缩小了20%，名字也用了明清时期的“承天门”、大明门、承天门、午门，然后是太和门，乾清宫为中轴线的终结。',
        icon: require('../../assets/img/theme-icon-2.png'),
        url: require('../../assets/img/theme-pack-2.png'),
      },
      {
        name: '秦王宫',
        desc: '秦王宫景区是1997年为著名导演陈凯歌拍摄历史巨片《荆轲刺秦王》而建。占地面积800亩，建筑面积达11万平方米。有雄伟壮观的王宫宝殿27座，主殿“四海归一殿” 高达44.8米，面积17169平方米。长2289米，高18米的巍巍城墙与王宫大殿交相辉映，淋漓尽致地表现出秦始皇并吞六国，一统天下的磅礴气势。还有一条长 120米，占地面积20亩，建筑面积6000平方米的“秦汉街”，充分展示了秦汉时期的街肆风貌。黄尘古道，金戈铁马，燕赵建筑，秦汉文化，在秦王宫得以真实再现。也是著名电影《英雄》、《功夫之王》等大片的诞生地。当年陈凯歌团队中的设计师们花费了四年心血设计出了一幅宏伟的秦王宫蓝图，而秦王宫景区仿建的原型就是秦王朝最主要的宫殿——咸阳宫。',
        icon: require('../../assets/img/theme-icon-3.png'),
        url: require('../../assets/img/theme-pack-3.png'),
      },
      {
        name: '清明上河图',
        desc: '清明上河图景区是中国好莱坞-横店影视城的经典六大景区之一，根据北宋著名画家张择端的巨作《清明上河图》为蓝本，取其神韵，结合北宋时期的社会背景、民俗、民风及宋时的古建特色，按影视拍摄的需要建造而成的影视基地。 清明上河图景区占地面积600余亩，建有房屋120多幢，桥梁6座，码头3个，船只2艘，牌坊14座。景区分为外城、里城和宫城，城中有“汴河”蜿蜒，形成了城外有城，河内有河的独特格局。',
        icon: require('../../assets/img/theme-icon-4.png'),
        url: require('../../assets/img/theme-pack-4.png'),
      },
    ]
    const serviceList = [
      { name: '圆明新园', img: require('@/assets/img/service-img1.png'), url: ''},
      { name: '秦王宫', img: require('@/assets/img/service-img2.png'), url: 'https://hyt.dongyang.gov.cn/VRPT/tour/c04884b321e53b03'},
      { name: '广州街/香港街', img: require('@/assets/img/service-img3.png'), url: 'https://hyt.dongyang.gov.cn/VRPT/tour/1f9b408c290c9873'},
      { name: '明清宫苑', img: require('@/assets/img/service-img4.png'), url: 'https://hyt.dongyang.gov.cn/VRPT/tour/3607e4e9acce92ef'},
      { name: '清明上河图', img: require('@/assets/img/service-img5.png'), url: 'https://hyt.dongyang.gov.cn/VRPT/tour/9cc803641fb86998'},
      { name: '梦外滩', img: require('@/assets/img/smart-search-bg.png'), url: 'https://hyt.dongyang.gov.cn/VRPT/tour/3db379316edb5fb2'},
    ]
    let iframeSrc = ref<string>()
    let iframeShow = ref<boolean>(false)
    const serviceClick = (data:string) => {
      if(data){
        window.open(data, '_blank')
        // iframeSrc.value = data
        // iframeShow.value = true
      }
    }
    const iframeClose = () => {
      iframeSrc.value = ''
      iframeShow.value = false
    }
    const changeActive = (index:number) => {
      tabsActive.value = index
    }
    const onChange = (current: number) => {
      active.value = current
    };
    const dotChange = (index: number)=> {
      active.value = index
      carouselRef.value.goTo(index)
    }
    return {
      active,
      attractList,
      attractButton,
      pack,
      serviceList,
      tabsActive,
      tabs,
      carouselRef,
      iframeSrc,
      iframeShow,
      serviceClick,
      iframeClose,
      changeActive,
      onChange,
      dotChange,
    };
  }
});
</script>

<style scoped lang="less">
  .d-flex {display: flex}
  .align-items-c { align-items: center }
  .justify-content-sb { justify-content: space-between;}
  .justify-content-c { justify-content: center}
.information {
  background: url("../../assets/img/nlzx-bg.png");

  @height: 72px;
  .tabs {
    height: @height;
    background: #FFFFFF;

    .tabs-box {
      display: flex;
      align-items: center;
      justify-content: left;
      width: 1200px;
      height: 100%;
      margin: 0 auto;

      .tabs-item {
        position: relative;
        width: 200px;
        height: @height;
        line-height: @height;
        padding: 0 20px;
        font-size: 16px;
        color: #313233;
        letter-spacing: 0.96px;
        font-weight: 400;
        cursor: pointer;
        text-align: center;

        &:not(:first-child)::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          margin-top: -8px;
          width: 2px;
          height: 16px;
          background: #C8CACC;
        }

        &.active {
          position: relative;
          font-size: 20px;
          color: #3D2A24;
          letter-spacing: 1.2px;
          font-weight: 500;

          &::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            margin-left: -12px;
            width: 24px;
            height: 2px;
            background: #3D2A24;
          }
        }

      }
    }
  }

  .center-title {
    padding-top: 40px;
    font-size: 32px;
    color: #313233;
    letter-spacing: 1.92px;
    font-weight: 500;

    span {
      margin: 0 10px;
      vertical-align: middle;
    }

    img {
      vertical-align: middle;
      width: 24px;
    }
  }

  .center-sub-title {
    margin-top: 10px;
    font-size: 16px;
    color: #B0B5B8;
    letter-spacing: 0.96px;
    text-align: center;
    font-weight: 400;
  }

  .center-box {
    width: 1200px;
    margin: 0 auto;
    padding: 40px 0 0;

    .card-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .card-item {
        margin-bottom: 24px;
        width: 48%;
        padding: 10px 20px;
        background: #FFFFFF;
        border: 1px solid #C8CACC;
        text-align: left;

        .card-item-header {
          position: relative;
          margin-bottom: 30px;
          padding: 5px 10px 5px 20px;
          font-size: 24px;
          font-weight: 400;
          color: #313233;
          line-height: 32px;
          letter-spacing: 1px;

          &:before {
            content: '';
            position: absolute;
            top: 8px;
            left: 10px;
            width: 4px;
            height: 24px;
            background: linear-gradient(180deg, #D8AE81 0%, #BA9771 100%);
          }

          span {
            height: 22px;
            font-size: 16px;
            color: #B0B5B8;
            line-height: 22px;
          }
        }

        .card-item-body {
          .attract-list-item {
            display: flex;
            justify-content: space-between;
            padding: 0px 10px;
            cursor: pointer;
            height: 36px;
            line-height: 36px;
            .attract-list-item-content {
              font-size: 16px;
              color: #313233;
            }

            .attract-list-item-date {
              font-size: 16px;
              font-weight: 400;
              color: #B0B5B8;
            }
          }

          .attract-button-box {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            .attract-button-item {
              //width: 25%;
              text-align: center;
              cursor: pointer;
              .attract-button-item-img {
                margin-bottom: 10px;
              }
              .attract-button-item-title {
                font-size: 16px;
                color: #313233;
                line-height: 22px;
              }
            }
          }
        }
      }
    }

    .shooting-box {
      .shooting-desc {
        margin-top: 10px;
        font-size: 18px;
        color: #313233;
        line-height: 32px;
        letter-spacing: 1px;
        text-align: left;
      }
      .shooting-more {
        margin-top: 50px;
        text-align: center;
        .shooting-more-btn {
          display: inline-block;
          width: 163px;
          height: 50px;
          line-height: 50px;
          background: #FFFFFF;
          border-radius: 30px;
          border: 1px solid #979797;
          font-size: 18px;
          color: #B8946E;
          letter-spacing: 1px;
          cursor: pointer;

          &:after {
            position: absolute;
            content: '→';
            margin-left: 10px;
            font-size: 12px;
          }
        }
      }
    }

    .dots-box {
      display: flex;
      justify-content: space-around;
      margin-bottom: 60px;
      .dots-item {
        cursor: pointer;
        .dots-item-img {
          margin-right: 15px;
          filter: grayscale(100%);
        }

        .dots-item-name {
          height: 25px;
          font-size: 18px;
          font-weight: 400;
          color: #313233;
          line-height: 25px;
          letter-spacing: 1px;
        }

        &.active{
          .dots-item-img {
            filter: grayscale(0%);
          }
          .dots-item-name {
            color: #313233;
            background: linear-gradient(180deg, #CE9738 0%, #BD9B75 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }

    .carousel-item {
      padding: 0 50px;
      .center-item {
        display: flex;
        .center-left {
          width: 75%;
          //margin-right: 50px;

          .center-left-img {
            margin-left: 5px;
          }
        }
        .center-right {
          position: relative;
          flex: 1;
          margin-left: 20px;
          text-align: left;

          //&:after {
          //  content: url("../../assets/img/theme-icon-line.png");
          //  position: absolute;
          //  right: 0;
          //  bottom: 0;
          //}
          .center-left-title {
            margin-bottom: 24px;
            font-size: 24px;
            font-weight: 700;
            color: #313233;
            line-height: 33px;
            letter-spacing: 1px;
          }

          .center-left-content {
            //height: 340px;
            overflow: hidden; //超出的文本隐藏
            display: -webkit-box;
            -webkit-line-clamp: 14; // 超出多少行
            -webkit-box-orient: vertical;
            font-size: 16px;
            font-weight: 400;
            color: #626566;
            line-height: 22px;
            text-indent: 2em;
          }

          .center-left-more {
            position: absolute;
            bottom: 0;
            font-size: 16px;
            color: #B8946E;
            line-height: 22px;
            cursor: pointer;
          }
        }
      }
    }
  }

  .service-items {
    .service-items-li {
      position: relative; height: 454px;
      .service-items-img { position: absolute; z-index: 2; overflow: hidden;border-radius: 4px;}
      .service-items-img .name { position: absolute; z-index: 3;  width: 100%; height: 100%;  color: #fff; font-size: 16px; }
      .service-items-img .name-bg {border-radius: 4px; position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4);transition: all 0.5s;}
      .service-items-img:hover .name-bg { left: 60px; top: 60px; right: 60px; bottom:60px; background: rgba(61,42,36,0.7);}
      /*left: 50%; top: 50%; width: 100%; height: 100%;transform: translate(-50%, -50%);*/
      /*width: 100px; height: 100px;*/
      /*left: 0; top: 0; right: 0; bottom: 0;*/
      /*left: 60px; top: 60px; right: 60px; bottom:60px; */
      .service-items-img:nth-child(1) { left: 0; top: 0; width: 225px; height: 219px;}
      .service-items-img:nth-child(2) { left: 240px; top: 0; width: 225px; height: 219px;}
      .service-items-img:nth-child(3) { left: 0; bottom: 0; width: 466px; height: 219px;}
      .service-items-img:nth-child(4) { right: 0; top: 0; width: 466px; height: 219px;}
      .service-items-img:nth-child(5) { right: 0; bottom: 0; width: 466px; height: 219px;}
      .service-items-img:nth-child(6) { left: 50%; bottom: 0; width: 236px; height: 454px; margin-left: -118px;}
    }
  }


  .more-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 50px;
    .more-btn {
      margin: 0 12px;
      width: 156px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      &:after {
        position: absolute;
        content: '→';
        margin-left: 10px;
        font-size: 12px;
      }
      &.more-btn-more {
        background: rgba(216,216,216,0.00);
        border: 1px solid rgba(200,202,204,1);
        border-radius: 4px;
        font-size: 16px;
        color: #313233;
        text-align: center;
      }
      &.more-btn-heng {
        background: #3D2A24;
        border-radius: 4px;
        font-size: 16px;
        color: #FFFFFF;
        text-align: center;
      }
    }
  }

  .iframe-bg {
    position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 66; background: rgba(0,0,0,.6);
    iframe { position: fixed; width: 90%; height: 80%; left: 5%; top: 10%; z-index: 88; border: none;}
  }
}

</style>
